<template>
    <div class="position-banner wh">
      <swiper :options="swiperOption" ref="mySwiper" >
        <swiper-slide>
          <img src="../assets/images/news/11111.png"/>
          <div class="news-button clearfix">
            <div class="news-button-time">
              <span>2018.5.11</span>
            </div>
            <router-link to="/intelligenceCompetition">
              <div class="news-button-detail">
                <span>查看详情</span>
              </div>
            </router-link>
          </div>
          <div class="news-title">极限智慧与奥林匹克大赛在京启动</div>
        </swiper-slide>
        <swiper-slide>
          <img src="../assets/images/news/22222.png"/>
          <div class="news-button clearfix">
            <div class="news-button-time">
              <span>2018.5.11</span>
            </div>
            <router-link to="/olympicSport">
              <div class="news-button-detail">
                <span>查看详情</span>
              </div>
            </router-link>
          </div>
          <div class="news-title">点燃激情，助力冬奥</div>
        </swiper-slide>
        <swiper-slide>
          <img src="../assets/images/news/33333.png"/>
          <div class="news-button clearfix">
            <div class="news-button-time">
              <span>2018.5.11</span>
            </div>
            <router-link to="/productConference">
              <div class="news-button-detail">
                <span>查看详情</span>
              </div>
            </router-link>
          </div>
          <div class="news-title">中富竞娱产品发布会圆满落幕</div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'companyNews',
  data () {
    return {
      swiperOption: {
        notNextTick: true,
        speed: 400,
        autoplay: true,
        grabCursor: true,
        setWrapperSize: true,
        autoplayDisableOnInteraction: false,
        autoHeight: true,
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        mousewheelControl: true,
        observeParents: true,
        slidesPerView: 3
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  }
}
</script>

<style scoped>
  .wh{
    width: 1300px;
    height: 414px;
  }
  .swiper-container{
    width: 1200px;
  }
  .swiper-button-prev{
    width: 53px;
    height: 85px;
    background: url("../assets/images/news_left.png") no-repeat center;
    left: -5px;
  }
  .swiper-button-prev:hover{
    background: url("../assets/images/news_left_hover.png") no-repeat center;
  }
  .swiper-button-next{
    width: 53px;
    height: 85px;
    background: url("../assets/images/news_right.png") no-repeat center;
    right: -11px;
  }
  .swiper-button-next:hover{
    background: url("../assets/images/news_right_hover.png") no-repeat center;
  }
  .news-button{
    position: absolute;
    bottom: 0;
    right: 45px;
  }
  .news-button div{
    float: left;
    width: 140px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    font-size: 18px;
    transform: skew(-8deg);
    margin-left: 5px;
  }
  .news-button div span{
    display: inline-block;
    transform: skew(8deg);
  }
  .news-button-time{
    background-color: #3640a7;
  }
  .news-button-detail{
    background-color: #ba3382;
    cursor: pointer;
    color: #fff;
    transition: all .3s;
  }
  .news-button-detail:hover span{
    font-size: 22px;
  }
  .news-title{
    position: absolute;
    width: 290px;
    top: 298px;
    left: 34px;
    bottom: 52px;
    display: flex;
    align-items: center;
    font-size: 22px;
    color: #111;
  }
</style>
